<extend name="./public/frame.html"/>
<block name="content">
    <style>
        blockquote {
            -webkit-margin-end: 0px;
        }
    </style>
    <blockquote class="layui-elem-quote search">
    <div class="layui-row">
        <div class="layui-col-xs6 layui-col-md5 layui-col-lg5">
            <div class="layui-row">
                <!--<div class="layui-col-xs4">-->
                    <!--<div class="layui-form">-->
                        <!--<div class="layui-inline">-->
                            <!--<div class="layui-input-inline" style="width:260px;">-->
                                <!--<select id="route_id" class="layui-input">-->
                                    <!--<option value="">路线名称</option>-->
                                    <!--<volist name="route_info" id="vo">-->
                                        <!--<option value="{$vo['route_id']}">{$vo['start_address_name']}({$vo['start_rail_name']}) => {$vo['end_address_name']}({$vo['end_rail_name']})</option>-->
                                    <!--</volist>-->
                                <!--</select>-->
                            <!--</div>-->
                        <!--</div>-->
                    <!--</div>-->
                <!--</div>-->
                <div class="layui-col-xs4">
                    <div class="layui-form">
                        <div class="layui-inline">
                            <div class="layui-input-inline" style="margin-left: 40px;">
                                <input type="text" name="model_name" id="model_name" lay-verify="required" placeholder="车型名称" class="layui-input"/>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-xs4">
                    <div class="layui-form">
                        <div class="layui-inline">
                            <div class="layui-input-inline">
                                <select id="is_use" class="layui-input">
                                    <option value="">启用/停用</option>
                                    <option value="1">启用</option>
                                    <option value="2">停用</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-xs4 layui-col-md4 layui-col-lg4">
            <div class="layui-row">
                <div class="layui-col-xs4">
                    <div class="layui-btn-group">
                        <button class="layui-btn" data-type="search">搜索</button>
                        <button class="layui-btn layui-btn-disabled" data-type="" id="reset">复位</button>
                    </div>
                </div>
                <div class="layui-col-xs4">
                    <div class="layui-btn-group">
                        <button class="layui-btn layui-btn-warm" data-type="add">添加包车类型</button>
                        <!--<button class="layui-btn" style="background-color: #5FB878" data-type="batch">批量处理</button>-->
                    </div>
                </div>
            </div>
        </div>
    </div>
    </blockquote>
    <table class="layui-table" lay-filter="banci" id="banci" lay-data="{id:banci}"></table>
    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="edit">修改</a>
        {{#if(d.id!=1){}}
        <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
        {{#}}}
    </script>
    <script type="text/html" id="is_useTpl">
        <input type="checkbox" name="is_use" data-id="{{d.id}}" value="{{d.is_use}}" lay-skin="switch" lay-text="启用|停用" lay-filter="is_use" {{ d.is_use == 1 ? 'checked' : '' }}>
    </script>
    <script type="application/javascript">
        layui.use(['table', 'laytpl', 'laydate','form'], function () {
            var table = layui.table, form = layui.form, laydate = layui.laydate;
            lay('.date').each(function(){
                laydate.render({
                    elem: this
                    ,type: 'date'
                    ,trigger: 'click'
                });
            });
            lay('.time').each(function(){
                laydate.render({
                    elem: this
                    ,type: 'time'
                    ,format: 'HH:mm'
                    ,trigger: 'click'
                });
            });
            var tableIns = table.render({
                elem:"#banci",
                id:"banci",
                url:"{$url}",
                cols: [[
                    {checkbox:true,title:"",fixed: true},
                    {field:'id', width:80,sort: true,title:"ID",align:'center'},
                    {field:'route_name', width:300,title:"线路名称",align:'center'},
                    {field:'model_name', width:150,title:"车型名称",align:'center'},
                    {field:'max_passenger_num', width:150,title:"核载人数",align:'center'},
                    {field:'is_car_msg', width:110,title:"车辆图片",align:'center'},
                    {field:'price', width:120,sort: true,title:"包车价格",align:'center'},
                    {field:'is_use', width:120,templet:is_useTpl,title:"启用状态"},
                    {fixed:'right', toolbar: '#barDemo', width:200, align:'center',title:"操作"}
                ]],
                page:true,
                limit:10,
                done: function(res, curr, count){
                    _cur_page = curr;
                    _cur_limit = res['limit'];
                    _count = count;
                }
            });
            //监听工具条
            table.on('tool(banci)', function (obj) {
                var data = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                var tr = obj.tr; //获得当前行 tr 的DOM对象
                var id = data.id;
                if (layEvent === 'del') {
                    layer.confirm('确定删除吗?',{icon:2}, function (index) {
                        $.post("{:url('del')}", {'id': id}, function (res) {
                            switch (res['code']){
                                case 1:
                                    layer.msg(res.msg,{'icon':1,'time':1000});
                                    obj.del();
                                    break;
                                default:
                                    layer.msg(res.msg,{'icon':2});
//                                    layer.alert(res['msg'],{icon: 5});
                                    break;
                            }
                        }, 'json');
                        layer.close(index);
                    });
                }
                else if (layEvent === 'edit') {
                    layer.open({
                        type: 2,
                        title: '编辑id为'+data.id+'的信息',
                        shadeClose: true,
                        shade: 0.8,
                        area: ['100%', '100%'],
                        content: '{:url("/admin/charterCar/edit","id=")}' + id, //iframe的url
                        cancel: function (index, layero) {
                            table_r(tableIns);
                        }
                    });
                }
            });
            //监听启用/停用操作
            form.on('switch(is_use)', function(obj){
                var check = obj.elem;
                var ori = obj.elem.checked == true ? false : true;//在没有操作前加载的复选框属性值
                var value = obj.value;
                var id = $(obj.elem).data('id');
                var tip = ori == true ? '确定停用么?' : '确定启用么?';
                layer.confirm(tip, {icon: 3, title: '提示'},
                    function (index) {
                        var div = obj.othis.parent('div');
                        $.post("{:url('cancel')}", {'id': id,'ori_val':value}, function (res) {
                            switch (res['status']){
                                case 1:
                                    setTimeout(function () {
                                        layer.msg(res['msg'],{icon: 1});
                                        },500);
                                    table_r(tableIns);
                                    break;
                                default:
                                    layer.msg(res['msg'],{icon: 5,'time':1000},function () {
                                        $(check).prop('checked', ori);
                                        form.render();
                                    });
                                    break;
                            }
                        }, 'json');
                        layer.close(index);
                    },
                    function (index) {
                        $(check).prop('checked', ori);
                        form.render();
                        layer.close(index);
                    });
            });
            var $ = layui.jquery, active = {
                search: function () {

                    var route_id = $('#route_id').val();
                    var model_name = $('#model_name').val();
                    var is_use = $('#is_use').val();
                    var reset = $('#reset');
                    if (route_id||model_name||is_use) {
                        reset.removeClass('layui-btn-disabled').addClass('layui-btn-normal').data('type', 'reset');
                        table.reload('banci', {
                            url: '/admin/charterCar/search',
                            where: {
                                route_id: route_id,
                                model_name: model_name,
                                is_use: is_use
                            } //设定异步数据接口的额外参数
                        });
                    } else {
                        reset.removeClass('layui-btn-normal').addClass('layui-btn-disabled').data('type', '');
                        layer.alert('搜索项不能为空');
                    }
                }
                , reset: function () {
                    var reset = $('#reset');
                    if (reset.data('type') !== '') {
                        tableIns.reload({where:{}});
                    }
                    $('.layui-input').each(function () {                        $(this).val('');                    });                $('.layui-this').each(function () {$(this).removeClass('layui-this');});
                    reset.removeClass('layui-btn-normal').addClass('layui-btn-disabled').data('type', '');
                }
                , add: function () {
                    layer.open({
                        type: 2,
                        title: $(this).text(),
                        shadeClose: true,
                        shade: 0.8,
                        area: ['100%', '100%'],
                        content: '{:url("/admin/charter_car/add")}', //iframe的url
                        cancel: function (index, layero) {
                            table_r(tableIns);
                        }
                    });
                }
//                ,batch: function(){ //获取选中数据
//                    var checkStatus = table.checkStatus('banci')
//                        ,data = checkStatus.data,ids = [];
//                    if(data.length == 0){
//                        layer.alert('请至少选择一行数据',{icon:7});
//                        return false;
//                    }
//                    layer.open({
//                        title: "批处理方式",
//                        content: '请选择操作方式'
//                        ,btn: ['启用', '停用', '删除', '放弃']
//                        ,icon: 3
//                        ,yes: function(index, layero){
//                            data.forEach(function (value,key,array) {
//                                if(value.is_use == 2){
//                                    ids.push(value.id);
//                                }
//                            });
//                            if(ids.length==0){
//                                layer.alert('所选数据无需变化',{icon:7});
//                                return false;
//                            }
//                            ajax("/admin/inter_bespeak/batchCancel",ids,1,index);
//                        }
//                        ,btn2: function(index, layero){
//                            data.forEach(function (value,key,array) {
//                                if(value.is_use == 1){
//                                    ids.push(value.id);
//                                }
//                            });
//                            if(ids.length==0){
//                                layer.alert('所选数据无需变化',{icon:7});
//                                return false;
//                            }
//                            ajax("/admin/inter_bespeak/batchCancel",ids,2,index);
//                            return false //开启该代码可禁止点击该按钮关闭
//                        }
//                        ,btn3: function(index, layero){
//                            layer.confirm('确认都删除吗?',{icon:3},function (ind) {
//                                data.forEach(function (value,key,array) {
//                                    ids.push(value.id);
//                                });
//                                if(ids.length==0){
//                                    layer.alert('所选数据无需变化',{icon:7});
//                                    return false;
//                                }
//                                ajax("/admin/inter_bespeak/delBatch",ids,0,ind);
//                            })
//                        }
//                        ,btn4: function(index, layero){}
//                        ,cancel: function(){}
//                    });
//                }
            };
            $('.layui-btn').on('click', function () {
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });
            function ajax(url,ids,is_use,index) {
                $.post(url,{ids:JSON.stringify(ids),is_use:is_use},function (res) {
                    switch (res['status']) {
                        case 1:
                            table_r(tableIns);
                            break;
                        default:
                            layer.alert(res['msg'],{icon: 5});
                            break;
                    }
                    layer.close(index);
                })
            }
        });

    </script>
</block>
